import {genChartByAiAsyncMqUsingPost, genChartByAiAsyncUsingPost} from '@/services/AiBi/chartController';
import { UploadOutlined } from '@ant-design/icons';
import { Helmet } from '@umijs/max';
import { Button, Card, Col, Form, Input, Row, Select, Space, Upload, message } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { useForm } from 'antd/lib/form/Form';
import React, { useState } from 'react';
import Settings from '../../../../config/defaultSettings';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const GenChartAsync: React.FC = () => {
  const [form] = useForm();
  const [chartInfo, setchartInfo] = useState<API.AiResponse>();
  const [submit, setsubmit] = useState<boolean>(false);
  const onFinish = async (values: any) => {
    if (submit) return '';
    const params = {
      ...values,
      file: undefined,
    };
    setsubmit(true);
    setchartInfo(undefined);
    try {
      const res = await genChartByAiAsyncMqUsingPost(params, {}, values.file.file.originFileObj);
      console.log(res);
      if (res.code !== 0) {
        message.error('生成失败:' + res.message);
      } else {
        message.success('请稍后在我的图表页查看');
        form.resetFields();
        setchartInfo(res.data);
      }
    } catch (e: any) {
      message.error('生成失败:' + e.message);
    }
    setsubmit(false);
  };
  return (
    <div className={'genChartAsync'}>
      <Helmet>
        <title>
          {'智能分析'} - {Settings.title}
        </title>
      </Helmet>
      <Row>
        <Col span={15}>
          <Card>
            <Form
              form={form}
              labelCol={4}
              wrapperCol={16}
              labelAlign={'left'}
              name="genChart"
              {...formItemLayout}
              onFinish={onFinish}
              initialValues={{}}
            >
              <Form.Item
                name="chartName"
                label="图表名称"
                rules={[{ required: true, message: '请为你图起个名' }]}
              >
                <Input placeholder="为你的图表起个名字吧" />
              </Form.Item>

              <Form.Item
                name="goal"
                label="分析目标"
                rules={[{ required: true, message: '请输入你的需求' }]}
              >
                <TextArea placeholder="请输入你的分析需求，比如：分析用户增长趋势" />
              </Form.Item>

              <Form.Item name="chartType" label="图表类型">
                <Select
                  placeholder="Please select a chartType"
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '面积图', label: '面积图' },
                    { value: '饼图', label: '饼图' },
                    { value: '散点图', label: '散点图' },
                  ]}
                ></Select>
              </Form.Item>

              <Form.Item name="file" label="原始数据">
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined />}>上传原始数据</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 16, offset: 6 }}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submit} disabled={submit}>
                    智能分析
                  </Button>
                  <Button htmlType="reset">reset</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        {/*<Col span={12}>*/}
        {/*  <Card title={'分析结论'}>*/}
        {/*    {chartInfo?.genResult}*/}
        {/*    <Spin spinning={submit} />*/}
        {/*  </Card>*/}
        {/*  <Divider />*/}
        {/*  <Card title={'可视化图表'}>*/}
        {/*    {option && <ReactECharts option={option} />} <Spin spinning={submit} />*/}
        {/*  </Card>*/}
        {/*</Col>*/}
      </Row>
    </div>
  );
};
export default GenChartAsync;
